<style lang="scss" scoped>
.header {
  // background-color: skyblue;
  height: 58px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 2px 2px #ccc;
  padding: 0 20px;
  color: var(--color-text);
  background-color: var(--color-background);
  // z-index:;
  // 粘性定位
  // position: sticky;
  // top: 0;

  .left {
    display: flex;
    align-items: center;
    .logo {
      width: 132px;
      height: 24px;
    }
    .nav-menu {
      ul {
        display: flex;
        position: relative;
        li {
          margin: 0 20px;
          height: 60px;
          display: flex;
          align-items: center;
          &:hover .menu-div {
            display: block;
          }

          &:nth-child(1) {
            .menu-div {
              width: 100vw;
              max-height: 500px;
              overflow-y: scroll;
              position: fixed;
              top: 59px;
              background-color: red;
            }
          }

          &:last-child {
            position: relative;
            .menu-div {
              left: 50%;
              transform: translateX(-50%);
            }
          }

          .menu-div {
            position: absolute;
            top: 100%;
            left: 0;
            display: none;
            background-color: skyblue;
          }
        }
      }
    }
  }

  .right {
    display: flex;
    align-items: center;
    .search {
      margin-right: 100px;
      position: relative;
      .input-select {
        position: absolute;
        top: 100%;
        left: 0;
        padding: 0;
        display: none;
        &.active {
          display: block;
        }
      }
    }
  }
}
</style>

<template>
  <div class="header">
    <div class="left">
      <img src="/new_logo.svg" alt="" class="logo" />

      <div class="nav-menu">
        <ul>
          <li>
            <span>免费模版</span>
            <div class="menu-div">
              <div>1</div>
              <div>1</div>
              <div>1</div>
              <div>1</div>
              <div>1</div>
              <div>1</div>
              <div>1</div>
              <div>1</div>
              <div>1</div>
              <div>1</div>
              <div>1</div>
              <div>1</div>
              <div>1</div>
              <div>1</div>
              <div>1</div>
              <div>1</div>
              <div>1</div>
              <div>1</div>
              <div>1</div>
              <div>1</div>
              <div>1</div>
              <div>1</div>
              <div>1</div>
              <div>1</div>
              <div>1</div>
              <div>1</div>
              <div>1</div>
              <div>1</div>
              <div>1</div>
              <div>1</div>
              <div>1</div>
              <div>1</div>
              <div>1</div>
              <div>1</div>
              <div>1</div>
              <div>1</div>
              <div>1</div>
              <div>1</div>
              <div>1</div>
              <div>1</div>
              <div>1</div>
              <div>1</div>
              <div>1</div>
              <div>1</div>
              <div>1</div>
              <div>1</div>
              <div>1</div>
              <div>1</div>
              <div>1</div>
              <div>1</div>
              <div>1</div>
              <div>1</div>
              <div>1</div>
              <div>1</div>
              <div>1</div>
              <div>1</div>
              <div>1</div>
              <div>1</div>
              <div>1</div>
              <div>1</div>
              <div>1</div>
              <div>1</div>
              <div>1</div>
              <div>1</div>
              <div>1</div>
              <div>1</div>
              <div>1</div>
              <div>1</div>
              <div>1</div>
              <div>1</div>
              <div>1</div>
              <div>1</div>
              <div>1</div>
              <div>1</div>
              <div>1</div>
              <div>1</div>
              <div>1</div>
              <div>1</div>
              <div>1</div>
              <div>1</div>
              <div>1</div>
              <div>1</div>
              <div>1</div>
              <div>1</div>
              <div>1</div>
              <div>1</div>
              <div>1</div>
              <div>1</div>
              <div>1</div>
              <div>1</div>
              <div>1</div>
              <div>1</div>
              <div>1</div>
              <div>1</div>
              <div>1</div>
              <div>1</div>
              <div>1</div>
              <div>1</div>
              <div>1</div>
              <div>1</div>
              <div>1</div>
              <div>1</div>
              <div>1</div>
              <div>1</div>
              <div>1</div>
              <div>1</div>
              <div>1</div>
              <div>1</div>
              <div>1</div>
              <div>1</div>
              <div>1</div>
              <div>1</div>
              <div>1</div>
              <div>1</div>
              <div>1</div>
              <div>1</div>
              <div>1</div>
              <div>1</div>
              <div>1</div>
              <div>1</div>
              <div>1</div>
              <div>1</div>
              <div>1</div>
              <div>1</div>
              <div>1</div>
              <div>1</div>
              <div>1</div>
              <div>1</div>
              <div>1</div>
              <div>1</div>
              <div>1</div>
              <div>1</div>
              <div>1</div>
              <div>1</div>
              <div>1</div>
              <div>1</div>
              <div>1</div>
              <div>1</div>
              <div>1</div>
              <div>1</div>
              <div>1</div>
              <div>1</div>
              <div>1</div>
              <div>1</div>
              <div>1</div>
              <div>1</div>
              <div>1</div>
              <div>1</div>
              <div>1</div>
              <div>1</div>
              <div>1</div>
              <div>1</div>
              <div>1</div>
              <div>1</div>
              <div>1</div>
              <div>1</div>
              <div>1</div>
              <div>1</div>
              <div>1</div>
              <div>1</div>
              <div>1</div>
              <div>1</div>
              <div>1</div>
              <div>1</div>
              <div>1</div>
              <div>1</div>
              <div>1</div>
              <div>1</div>
              <div>1</div>
              <div>1</div>
              <div>1</div>
              <div>1</div>
              <div>1</div>
              <div>1</div>
              <div>1</div>
              <div>1</div>
              <div>1</div>
              <div>1</div>
              <div>1</div>
              <div>1</div>
              <div>1</div>
              <div>1</div>
              <div>1</div>
              <div>1</div>
              <div>1</div>
              <div>1</div>
              <div>1</div>
              <div>1</div>
              <div>1</div>
              <div>1</div>
              <div>1</div>
              <div>1</div>
              <div>1</div>
              <div>1</div>
              <div>1</div>
              <div>1</div>
              <div>1</div>
              <div>1</div>
              <div>1</div>
              <div>1</div>
              <div>1</div>
              <div>1</div>
              <div>1</div>
              <div>1</div>
              <div>1</div>
              <div>1</div>
              <div>1</div>
              <div>1</div>
              <div>1</div>
              <div>1</div>
              <div>1</div>
              <div>1</div>
              <div>1</div>
              <div>1</div>
              <div>1</div>
              <div>1</div>
              <div>1</div>
              <div>1</div>
              <div>1</div>
              <div>1</div>
              <div>1</div>
              <div>1</div>
              <div>1</div>
              <div>1</div>
              <div>1</div>
              <div>1</div>
              <div>1</div>
              <div>1</div>
              <div>1</div>
              <div>1</div>
              <div>1</div>
              <div>1</div>
              <div>1</div>
              <div>1</div>
              <div>1</div>
              <div>1</div>
              <div>1</div>
              <div>1</div>
              <div>1</div>
              <div>1</div>
              <div>1</div>
              <div>1</div>
              <div>1</div>
              <div>1</div>
              <div>1</div>
              <div>1</div>
              <div>1</div>
              <div>1</div>
              <div>1</div>
              <div>1</div>
              <div>1</div>
              <div>1</div>
              <div>1</div>
              <div>1</div>
              <div>1</div>
              <div>1</div>
              <div>1</div>
              <div>1</div>
              <div>1</div>
              <div>1</div>
              <div>1</div>
              <div>1</div>
              <div>1</div>
              <div>1</div>
              <div>1</div>
              <div>1</div>
              <div>1</div>
              <div>1</div>
              <div>1</div>
              <div>1</div>
              <div>1</div>
              <div>1</div>
              <div>1</div>
              <div>1</div>
              <div>1</div>
              <div>1</div>
              <div>1</div>
              <div>1</div>
              <div>1</div>
              <div>1</div>
              <div>1</div>
              <div>1</div>
              <div>1</div>
              <div>1</div>
              <div>1</div>
              <div>1</div>
              <div>1</div>
              <div>1</div>
              <div>1</div>
              <div>1</div>
              <div>1</div>
              <div>1</div>
              <div>1</div>
              <div>1</div>
              <div>1</div>
              <div>1</div>
              <div>1</div>
              <div>1</div>
              <div>1</div>
              <div>1</div>
              <div>1</div>
              <div>1</div>
              <div>1</div>
              <div>1</div>
              <div>1</div>
              <div>1</div>
              <div>1</div>
              <div>1</div>
              <div>1</div>
              <div>1</div>
              <div>1</div>
              <div>1</div>
              <div>1</div>
              <div>1</div>
              <div>1</div>
              <div>1</div>
              <div>1</div>
              <div>1</div>
              <div>1</div>
              <div>1</div>
              <div>1</div>
              <div>1</div>
              <div>1</div>
              <div>1</div>
              <div>1</div>
              <div>1</div>
              <div>1</div>
              <div>1</div>
            </div>
          </li>
          <li>
            <span>免费模版</span>
            <div class="menu-div">
              sejkfnwlek.fmq；为贫困地区排污费你去玩去可能我疯狂加班我耳机去买票我；哦家你去哦了我i人可能去看我就饿看宁缺毋滥去请问去了吗我怕去请问而且我厄齐尔
            </div>
          </li>
          <li>
            <span>免费模版</span>
            <div class="menu-div">
              <!-- <iframe src="https://www.bwie.net/" style="width: 500px; height: 500px"></iframe> -->
            </div>
          </li>
          <li>
            <span>免费模版</span>
            <div class="menu-div">
              <!-- <iframe src="https://www.bwie.net/" style="width: 500px; height: 500px"></iframe> -->
            </div>
          </li>
          <li>
            <span>免费模版</span>
            <div class="menu-div">
              <!-- <iframe src="https://www.bwie.net/" style="width: 500px; height: 500px"></iframe> -->
            </div>
          </li>
        </ul>
      </div>
    </div>
    <div class="right">
      <div v-if="$route.path === '/create/product'" class="search"></div>
      <div class="search" v-else>
        <el-input
          style="max-width: 600px; background-color: white"
          placeholder="Please input"
          class="input-with-select"
          @focus="isActive = true"
          @blur="isActive = false"
        >
          <template #prepend>
            <el-select v-model="select" style="width: 80px; background-color: white">
              <el-option label="全部" value="1" />
              <el-option label="H5" value="2" />
              <el-option label="海波" value="3" />
            </el-select>
          </template>
          <template #append>
            <el-button
              :icon="Search"
              type="primary"
              style="background-color: #1261ff; color: white"
            />
          </template>
        </el-input>
        <div class="input-select" :class="{ active: isActive }" ref="inputSelectRef">
          <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
            <li>7</li>
            <li>8</li>
            <li>9</li>
            <li>10</li>
          </ul>
        </div>
      </div>

      <User></User>
      <el-switch v-model="theme" style="margin-left: 10px" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { Search } from '@element-plus/icons-vue'
import { ref, watch } from 'vue'
import User from '../user/indexView.vue'
const inputSelectRef = ref<HTMLDivElement>()
const isActive = ref(false)
const select = ref('1')
const theme = ref(true)

watch(theme, () => {
  if (theme.value) {
    document.body.classList.remove('active')
  } else {
    document.body.classList.add('active')
  }
})
</script>

<script lang="ts">
export default {
  name: 'My-header'
}
</script>
